<template>
    <div class="many-person-wrap">
        <el-dialog v-dialog-drag :visible="visible" title="选择人员" :close-on-click-modal="false"
            :modal-append-to-body="false" :before-close="personSgCanceClick">
            <!--员工选择弹窗(多选)-->
            <div class="personmlDialog" v-if="visible">
                <div class="psg-body">
                    <div class="deptmultiple clearfix">
                        <div class="seldept">
                            <h4 class="dlg-title">可选员工</h4>
                            <el-form class="bgfff">
                                <el-row>
                                    <el-col :span="12" class="staffSg-wrap">
                                        <el-input @focus="focusFun" placeholder="选择组" v-model="personSgText"></el-input>
                                        <i class="fa fa-times close-tree" @click="isClearBtn"></i>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-input placeholder="输入员工姓名" v-model="filterText"> </el-input>
                                    </el-col>
                                </el-row>
                                <el-form-item class="staffSg-wrap">
                                    <el-tree v-if="isShowStaffTree" class="filter-tree" @node-click="personSgClick"
                                        :data="deptData" :props="defaultProps" default-expand-all ref="tree2"
                                        :filter-node-method="filterNode" highlight-current>
                                    </el-tree>
                                    <ul class="staffSg-list" v-else style="height:215px;">
                                        <li v-for="(item,index) in personsgli" @click="personSgLiClick(item)"
                                            :key="'a'+index">{{item.username + '(' + item.employeeNo + ')' }}</li>
                                        <span v-if='personsgli.length <=0' class='stop_NO'>暂无数据</span>
                                    </ul>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div class="seleddept">
                            <h4 class="dlg-title">已选员工</h4>
                            <ul class="staffSg-list" style="height:250px;">
                                <li v-for="(item,idx) in fpRList" :key="'fpRList'+idx">{{item.name}}
                                    <i class="el-icon-close" @click="delstaff(idx)"></i>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="bottom-btn">
                        <el-button type="primary" @click="personSgSureClick">确 定</el-button>
                        <el-button @click="personSgCanceClick">取 消</el-button>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import { transformTozTreeFormat } from '@/utils/Tools';
    import {
        initDeptTree,
        getStaffById,
        getUserBaseList
    } from "@/service/core/deptConf";
    import { mapState } from 'vuex';
    export default {
        name: 'mulPerson',
        props: {
            visible: {
                type: Boolean,
                default: false
            },
            data: { // 反显的数据
                type: Array,
                default () {
                    return []
                }
            },
        },
        data() {
            return {
                _deptId: '',
                deptData: [],
                filterText: '',
                isShowStaffTree: false,
                personsgli: [],
                infopersonsgli: [],
                filterNum: [],
                personSgText: "",
                resStr: "",
                fpRList: [],
                sonname: "",
                sonid: "",
                defaultProps: {
                    children: "children",
                    label: "name"
                },
            };
        },
        watch: {
            personSgText(val) { // 业务组模糊查询
                if (this.$refs.tree2) {
                    this.$refs.tree2.filter(val);
                }
            },
            visible(val) {
                if (val) {
                    this.fpRList = [...this.data];
                }
            }
        },
        computed: {
            ...mapState({
                token: state => state.token.token,
                deptId: state => state.token.deptId,
                deptName: state => state.token.deptName,
            })
        },
        mounted() {
            this.$nextTick(() => {
                $(document).on('click', '.el-dialog__body', (e) => {
                    this.isShowStaffTree = false;
                    if (this.personSgText || this.filterText) {
                        this.initgetStaffById();
                    } else {
                        this.personsgli = [];
                    }
                })
                $('body').on('click', '.seldept', (e) => { //阻止冒泡
                    event.stopPropagation();
                })

                this._deptId = this.deptId;
            })
        },
        methods: {
            filterNode(value, data) {
                if (!value) return true;
                return data.name.indexOf(value) !== -1;
            },
            initgetStaffById() { //机构下的人
                let params = {
                    deptId: this._deptId,
                    status: 'ACTIVE',
                    columns: 'employeeNo',
                    orders: 'ASC',
                    usernameLk: this.filterText,
                }
                this.personsgli = [];
                getUserBaseList(params).then(response => {
                    if (response.data.data) {
                        response.data.data.forEach((item, index) => {
                            if (item.empStatusId == "ONWORK" && (item.userStatusId == "LOCK" || item
                                    .userStatusId == "ACTIVE")) {
                                this.personsgli.push(item);
                            }
                        });
                        this.isShowStaffTree = false;
                    }
                });
            },
            focusFun() {
                this.isShowStaffTree = true;
                this.personSgText = null;
                this.deptTree();
            },
            personSgClick(val, data, self) {
                this._deptId = val.id;
                this.resStr = "";
                this.getDeptParents(data);
                this.personSgText = this.resStr;
                this.initgetStaffById()
                this.isShowStaffTree = false;
            },
            deptTree() {
                //初始化机构树(单选)
                var _this = this;
                var qs = require("qs");
                _this.deptData = [];
                let params = {
                    token: _this.token,
                    statusId: "ACTIVE",
                    columns: 'path,orderNum',
                    orders: 'true,true'
                };
                initDeptTree(params).then(response => {
                    if (response.data.code == 1000) {
                        var data = response.data.data;
                        data = data.filter(v => v.statusId == 'ACTIVE');
                        let nodes = transformTozTreeFormat(data); // 组装成嵌套结构的数据
                        this.deptData.push(...nodes);
                    }
                });
            },
            getDeptParents(data) {
                this.resStr = this.resStr.length === 0 ? data.data.name : data.data.name + " -> " + this.resStr;
                if (data.parent.parent != null) this.getDeptParents(data.parent);
            },
            personSgLiClick(data) {
                var flag = true;
                this.fpRList.forEach(item => {
                    if (data.id == item.id) {
                        flag = false;
                    }
                });
                if (flag == true) {
                    this.fpRList.push({
                        id: data.id,
                        name: data.username + '(' + data.employeeNo + ')',
                        employeeNo: data.employeeNo,
                        dutyName: data.dutyName,
                        deptName: data.deptName
                    });
                    console.log(this.fpRList, 'fpRList');
                }
            },
            delstaff(index) {
                this.fpRList.splice(index, 1);
            },
            personSgCanceClick() {
                this._deptId = this.deptId;
                this.filterText = "";
                // this.fpRList    = [];
                this.$emit("update:visible", false);
            },
            personSgSureClick() { // 点击确定按钮
                this.fpRList.forEach(item => {
                    this.sonname += item.name + ",";
                    this.sonid += item.id + ",";
                });
                if (this.sonname != "") {
                    this.sonname = this.sonname.substring(
                        0,
                        this.sonname.length - 1
                    );
                }
                if (this.sonid != "") {
                    this.sonid = this.sonid.substring(0, this.sonid.length - 1);
                }
                this.$emit("update:visible", false);
                this.$emit("updateData", this.fpRList);
            },
            isClearBtn() {
                this._deptId = null; //清空机构id
                this.personSgText = null;
                this.initgetStaffById();
            }
        }
    };

</script>
<style lang="scss" scoped>
    .many-person-wrap {
        /deep/ {
            .el-form-item__content .el-tree {
                height: 210px;
                overflow: auto;
            }

            .el-dialog__body {
                padding: 10px 20px 20px;
            }
        }

        .dlg-title {
            margin-bottom: 10px;
        }

        .close-tree {
            position: absolute;
            right: 6px;
            top: 10px;
            cursor: pointer;
        }

        .praent-cont {
            position: relative;
        }

        .child-comnt {
            position: absolute;
            top: 10px;
            right: 6px;
            cursor: pointer;
        }

        .input-wrap {
            /deep/ .el-input__inner {
                height: 28px;
                line-height: 28px;
            }
        }

        .staffSg-list {
            height: 200px;
            overflow: auto;

            li {
                cursor: pointer;
                height: 28px;
                line-height: 28px;
                padding-left: 15px;

                &:hover {
                    background: #eeeeee;
                }

                i {
                    float: right;
                    margin: 7px 10px 0 0;
                }
            }
        }

        .stop_NO {
            width: 100%;
            display: inline-block;
            text-align: center;
        }

        .seldept {
            width: 50%;
            float: left;
            margin-right: 10px;
        }

        .seleddept {
            overflow: hidden;
        }
    }

</style>
